<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>编辑带参二维码</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/parmsErwm-create.css">
    <link rel="stylesheet" href="../js/jQuery-emoji/lib/css/jquery.mCustomScrollbar.min.css">
    <link rel="stylesheet" href="../js/jQuery-emoji/src/css/jquery.emoji.css">
</head>
<body>
        <div id="app">
                <!-- 头部 -->
                <top-bar ref="topbar"></top-bar>
                <!-- 开始 -->
                <div class="displayCenter">
                    <!-- 左边导航 -->
                    <div class="leftBox"> <left-site></left-site></div>
                    <div class="pageContent fffBackground">
                       <section class="weizhi">您当前所在的位置：公众号名称>公众号信息</section>
                       <section class="daicantitle">
                            编辑二维码
                        </section>
                        <section class="xuzhi">
                            <h3>带参二维码创建须知</h3>
                            <p>1）永久二维码最多创建10000个，永不过期；临时二维码没有创建数量的限制</p>
                            <p>2）永久二维码如果不够用，可以修改之前的二维码</p>
                            <p>3）在其他平台创建的二维码不会出现在本平台；</p>
                            <p>4）回复图文时，只能回复单图文，若选择多图文，则默认回复第一篇图文；</p>
                            <p>5）建议长期的推广渠道使用永久二维码，活动型的需求使用临时二维码</p>
                        </section>
                        <section class="createdGroup">
                            <div class="createdGroup-row">
                                <div class="downloadErweima">
                                    <span class="erweimaTit row-left">公众号二维码:</span>
                                    <img class="erweimaImg" src="../img/erweima.jpg" alt="二维码"/>
                                    <span class="erweimaDown">
                                        <img src="../img/down.png"/>
                                        下载</span>
                                </div>
                            </div>
                            <div class="createdGroup-row">
                                 <span class="row-left"> <i style="color:red">*</i> 二维码类型:</span>
                                 <input   :value="erwmType" disabled/>
                            </div>
                            <div class="createdGroup-row" v-if="erweimaType==1">
                                <span class="row-left"> <i style="color:red">*</i> 有效时间:</span>
                                <input :value="nowDate" class="dateInput"/>
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left"> <i style="color:red">*</i> 二维码名称:</span>
                                <input placeholder="请输入二维码名称，最多30个字" maxlength="30" class="nameInput"/>
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left"> <i style="color:red">*</i> 数据汇总:</span>
                                <div class="shujuCount">
                                    <span>扫描 <i style="color:red">0</i>次 </span><span>关注 <i style="color:red">0</i> 次</span>
                                    <span>关注 <i style="color:red">0</i>人 </span><span>留存 <i style="color:red">100</i>人 </span>
                                </div>
                                
                            </div>
                            <div class="createdGroup-row">

                                <span class="row-left">回复方式:</span>
                                <label for="radio-1"><input id="radio-1" name="radio" type="radio"/>全部回复 <span class="xuniRadio"></span> </label>   
                                <label for="radio-2"><input id="radio-2" name="radio" type="radio"/>随机回复一条<span class="xuniRadio"></span> </label>                               
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left" style="vertical-align: top;">回复内容:</span>
                                <div class="imgAndPOI">
                                    <section class="imgAndPOI-box">
                                        <img class="box-bannerImg" src="../img/u372.png"/>
                                        <div class="positionTital">图文标题</div>
                                       <ul class="imgAndPOI-cont">
                                            <li class="displayBetween">
                                                <p>文章同步成功后，请登录微信公众号后台</p>
                                                <div><img src="../img/u383.png" /></div>
                                                
                                            </li>
                                            <li class="displayBetween">
                                                <p>文章同步成功后，请登录微信公众号后台</p>
                                                <div><img src="../img/u383.png" /></div>
                                                    
                                            </li>
                                            <li class="displayBetween">
                                                <p>文章同步成功后，请登录微信公众号后台</p>
                                                <div><img src="../img/u383.png" /></div>       
                                            </li>
                                            <li class="displayBetween">
                                                <p>文章同步成功后，请登录微信公众号后台</p>
                                                <div><img src="../img/u383.png" /></div>       
                                            </li>
                                       </ul>
                                    </section>
                                    <section class="operation-box">
                                        <span>回复类型:图文</span> 
                                        <p> <img src="../img/deleteBtn.png"> 删除</p>
                                        <p @click="showWrapDialog('tuwen')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                    </section>
                                    <div class="bottom-line"></div>
                                </div>

                
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left" style="vertical-align: top;"></span>
                                
                                <div class="textType">
                                    <h3>回复类型：文本 <span> <img src="../img/deleteBtn.png"> 删除</span> 
                                        <span @click="showWrapDialog('wenzi')"> <img src="../img/tihuanBtn.png"> 替换</span> 
                                    </h3>
                                    <section class="textType-content">
                                        <p>族蚂网提供抖音在线教学服务，周一至周五晚8点开播！（法定节假日延后）诚邀您关注族蚂网抖音号：zumawang</p>
                                        <div>族蚂官网：zuma.com </div>
                                        <div>建站教学：​zuma.com</div>
                                    </section>
                                    <div class="bottom-line"></div>
                                </div>
                                
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left" style="vertical-align: top;"></span>
                                <div class="imgAndPOI">
                                    <section class="imgAndPOI-box">
                                        <img class="box-bannerImg" src="../img/u497.png"/>
                                        <div class="box-imgName">图片名称</div>
                                    </section>
                                    <section class="operation-box">
                                        <span>回复类型:图片</span> 
                                        <p> <img src="../img/deleteBtn.png"> 删除</p>
                                        <p @click="showWrapDialog('tupian')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                    </section>
                                    <div class="bottom-line"></div>
                                </div>
                                
                                
                            </div>

                            <div class="createdGroup-row">
                                    <span class="row-left" style="vertical-align: top;"></span>
                                    <div class="yinpinContent">
                                        <section class="yinpinPart">
                                                <section class="yinpinPart-top displayBetween">                                                                                                                                                                                                    
                                                    <div class="displayBetween">                                                                                                                                                                                                                   
                                                        <section class="yinpinPart-imgBox"><img src="../img/yinpinDialog1.png" /></section>                                                                                                                                                        
                                                        <section style="overflow:hidden;max-width:90px;white-space:nowrap;text-overflow:ellipsis;">                                                                                                                                               
                                                            <p>音频名称</p>                                                                                                                                                                                                                     
                                                            <p style="margin-top:20px;color:#AEAEAE;">20.00MB</p>                                                                                                                                                                             
                                                        </section>                                                                                                                                                                                                                                  
                                                                                                                                                                                                                                                                                                                               
                                                    </div>                                                                                                                                                                                                                                          
                                                    <div style="color:#AEAEAE;">                                                                                                                                                                                                                   
                                                            05:16                                                                                                                                                                                                                       
                                                    </div>                                                                                                                                                                                                                                         
                                                </section>                                                                                                                                                                                                                                          
                                                 <section class="yinpinPart-bottom displayBetween" style="line-height:40px;">                                                                                                                                                                        
                                                    <div> 更新时间:2019.1.2</div> <div> </div>                                                                                             
                                                </section>    
                                        </section>
                                        <section class="operation-box">
                                            <span>回复类型:音频</span> 
                                            <p> <img src="../img/deleteBtn.png"> 删除</p>
                                            <p @click="showWrapDialog('yinpin')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                        </section>
                                        <div class="bottom-line"></div>
                                    </div>
                                    
                                    
                            </div>
                            <div class="createdGroup-row">
                                    <span class="row-left" style="vertical-align: top;"></span>
                                    <div class="shipinContent">
                                        <section class="shipinPart">
                                                <section class="shipinBanner-box">
                                                        <img src="../img/shipinDialog1.png" />
                                                </section>  
                                                <section class="displayBetween shipin-des" style="line-height:25px; padding:0 10px">
                                                    <div>视频名称</div> <div style="color:#aeaeae">50MB</div>
                                                </section>   
                                                <section class="displayBetween shipin-updateTime" style="line-height:35px;padding:0 10px"> 
                                                    <div style="color:#797979">更新时间:2019.1.4</div> <div></div>    
                                                </section>        
                                        </section>
                                        <section class="operation-box">
                                            <span>回复类型:视频</span> 
                                            <p> <img src="../img/deleteBtn.png"> 删除</p>
                                            <p @click="showWrapDialog('shipin')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                        </section>
                                        <div class="bottom-line"></div>
                                    </div>
                                    
                                    
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left" style="vertical-align: top;"></span>
                                <div class="POIPart">
                                        <section class=" displayBetween">                                                                                                                                                                                                                    
                                            <div>                                                                                                                                                                                                                                               
                                                <img src="../img/POIdialog.png"/>                                                                                                                                                                                                                       
                                            </div>                                                                                                                                                                                                                                              
                                            <div class="POI-des">                                                                                                                                                                                                                               
                                                <h3 style="color:#333333;line-height:26px" class="ellipsis1">族蚂科技</h3>                                                                                                                                                                  
                                                <p  style="color:#333333;line-height:30px" class="des-address ellipsis1"> 上海市金山区林盛路136号祖玛科技</p>                                                                                                                                                    
                                                <p  style="color:#333333;line-height:30px" class="des-phone"> 222222222222</p>                                                                                                                                                                  
                                                <p  style="color:#797979;line-height:30px" class="des-updateTime">更新时间: 86978654 </p>                                                                                                                                              
                                            </div>                                                                                                                                                                                                                                              
                                        </section>  
                                       
                                </div>
                                <section class="operation-box">
                                        <span>回复类型:POI</span> 
                                        <p> <img src="../img/deleteBtn.png"> 删除</p>
                                        <p @click="showWrapDialog('POI')"> <img src="../img/tihuanBtn.png"> 替换</p>
                                </section>
                                <div class="bottom-line"></div>
                            </div>
                            <div class="createdGroup-row">
                                <span class="row-left"> </span>
                                <div class="newCreate">
                                    <span class="newCreateBtn" @click="newCreateBtn">新增回复</span>
                                    <div class="tabBtns" v-if="tabBtnsShow">
                                        <img class="bgImg" src="../img/u516.png"/>
                                        <div class="posBtn">
                                             <span @click="showWrapDialog('wenzi')"><img src="../img/wenzi.png" /> 文字</span>
                                             <span @click="showWrapDialog('tupian')"> <img src="../img/tupian.png" > 图片</span>
                                             <span @click="showWrapDialog('yinpin')"> <img src="../img/yinpin.png" > 音频</span>
                                             <span @click="showWrapDialog('shipin')"> <img src="../img/shipin.png" > 视频</span>
                                             <span @click="showWrapDialog('tuwen')"> <img src="../img/tuwenxiaoxi.png" > 图文消息</span>
                                             <span @click="showWrapDialog('POI')"> <img src="../img/POI.png" > POI</span>
                                        </div>
                                       
                                    </div>
                                    <p class="tip-error" v-if="len9">※  最多添加9条！</p>
                                </div>
                                
                            </div>
                            <div class="createdGroup-row">
                                <section class="submitBtn">
                                    <span >取消</span> <span class="activeBtn">保存</span>
                                </section>
                                
                            </div>
                        </section>
                    </div>
                </div>


                <section class="commonMarsk" v-if="dialogShow">
                        <tip-dialog ref="tipDialog" :dialogdata='dialogdata'  @close="closeDialog" :leftbtnhandler="leftBtnHandler" :rightbtnhandler="rightBtnHandler"></tip-dialog>
                </section>
                <wrap-dialog v-if="wrapDialogShow" @close-wrap-dialog-handel="closeWrapDialog" :dialogtype="dialogtype"></wrap-dialog>
                
        </div>
       
</body>
<!-- 头部 -->
<script src="../common/top-bar.js"></script>
<!-- 左侧导航栏 -->
<script src="../common/left-site.js"></script>
<!-- 提示弹窗 -->
<script src="../common/dialog.js"></script>
<!-- 素材弹框 -->
<script src="../common/wrap-dialog.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/lib/script/jquery.mCustomScrollbar.min.js"></script>
<script type="text/javascript" src="../js/jQuery-emoji/src/js/jquery.emoji.js"></script>

<script src="../js/public.js"></script>
<script>
    
        new Vue({
            el: '#app',
            data: {
              dialogdata: null,
              dialogShow:false,
              tabBtnsShow:false,
              erweimaType:0,//0是永久二维码1是临时的
              erweimaTypeList:[
                  '永久二维码','临时二维码'
              ],
              erwmType:'永久二维码/临时二维码',//回显的二维码类型
              len9:false,//是否大于九条
              nowDate:'',
              wrapDialogShow:false,//是否显示wrapDialog
              dialogtype:'',//选择的是什么类型弹框
            },
            created:function() {
                //public.ceshi()
            },
            mounted:function() {
                //this.$refs['topbar'].ce();
                let date = new Date();
                this.nowDate=date.getFullYear()+'-'+(Number(date.getMonth())+1)+'-'+date.getDate()
            },
            methods: {
             showWrapDialog:function(type){
                this.wrapDialogShow = true;
                this.dialogtype = type;
             },
             closeWrapDialog:function(){
                 
                 this.wrapDialogShow = false;
             },
              typeTab:function(v) {
                  this.erweimaType=v;
              },
              newCreateBtn:function() {
                this.dialogdata={
                    content:'免费版可添加1条关注回复，如需回复多条请升级套餐版本！',
                    btnLeft:'取消',
                    btnRight:'马上升级'
                }
                  this.dialogShow = true;
                  this.tabBtnsShow = true;
              },
              unBind:function(){//打开提示弹框
                  this.dialogdata={
                    content:'请前往微信公众平台取消授权。',
                    btnLeft:'好的',
                    btnRight:'查看教程'
                  }
                  this.dialogShow = true;
                  console.log(this.dialogdata,'dd')
                  //this.$refs['tipDialog'].isShow = true;
              },
              closeDialog:function(v){//关闭弹框
                
                    this.dialogShow = v;
              },
              leftBtnHandler:function(){//左边按钮的事件方法
                this.dialogShow = false;
                  alert('左边按钮的触发事件')
              },
              rightBtnHandler:function() {//左边按钮的事件方法
                 alert('右边边按钮的触发事件')
              }
            },
        })
    </script>
    
</html>